<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Femto ACS Demo</title>
<!-- DEMO styles - specific to this page -->

<link rel="stylesheet" type="text/css"  href="<s:url value='/theme/common/main.css'/>"/>
<!--[if lte IE 7]>
<style type="text/css"> body { font-size: 85%; } </style>
<![endif]-->

<script type="text/javascript">
/**var baserUrl = "<s:url value='/'/>";**/

</script>
<link rel="stylesheet" type="text/css"  href="<s:url value='/theme/common/html.css'/>"/>
<link rel="stylesheet" type="text/css"  href="<s:url value='/theme/blue/nav/menu.css'/>"/>
<link rel="stylesheet" type="text/css"  href="<s:url value='/theme/blue/jqueryui/jquery-ui-1.10.2.custom.css'/>"/>
<link rel="stylesheet" type="text/css" href="<s:url value='/theme/blue/layout/css/layout.css'/>"/>
<link rel="stylesheet" type="text/css" href="<s:url value='/js/plugin/ztree/css/zTreeStyle/zTreeStyle.css'/>"/>
<link rel="stylesheet" type="text/css"  href="<s:url value='/theme/blue/nav/tree_nav.css'/>"/>
<link  href="<s:url value='/theme/blue/nav/TabPanel.css" rel="stylesheet" type="text/css'/>"/>
<link  href="<s:url value='/theme/blue/nav/Toolbar.css" rel="stylesheet" type="text/css'/>"/>
<link  href="<s:url value='/theme/blue/nav/core.css" rel="stylesheet" type="text/css'/>"/>
<link rel="stylesheet" type="text/css"  href="<s:url value='/theme/common/form.css'/>"/>

<script type="text/javascript" src="<s:url value='/js/jquery-1.9.1.min.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/jquery-ui-1.10.2.custom.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/jquery.layout-latest.js'/>"></script>
<script type="text/javascript">
var treedetail = <s:property value="navDetail" escape="false"/>;
</script>
<script type="text/javascript" src="<s:url value='/js/plugin/ztree/js/jquery.ztree.core-3.5.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/plugin/ztree/js/jquery.ztree.excheck-3.5.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/Fader.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/TabPanel.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/Math.uuid.js'/>"></script>
<%--<script type="text/javascript" src="<s:url value='/js/Toolbar.js'/>"></script>--%>
<script type="text/javascript" src="<s:url value='/js/pages/main.js'/>"></script>
<script type="text/javascript" src="<s:url value='/js/util.js'/>"></script>
<link type="text/css" rel="stylesheet" href="<s:url value='/js/plugin/validator/css/screen.css'/>" />
		<script type="text/javascript" src="<s:url value='/js/plugin/validator/jquery.validate.js'/>"></script>
<jsp:include page="/WEB-INF/pages/common/Base.jsp"/>
  
<script type="text/javascript">
   var initWidth;
var widthWithError;
$().ready(function() {
	initWidth = $(".changePassword").dialog("option", "width" );
	widthWithError = initWidth+100;
	initValidate();
	
});
	function initValidate(){
		var validator;
		$.validator.setDefaults({
			submitHandler: function() { alert("submitted!"); 
		}
});
		jQuery.validator.addMethod("stringCheck", function(value, element) {
			var flag=false;
			var reg0=/^[A-Za-z0-9\(\)\~!@#\$\%\^\&\*_<>]+$/.test(value);
		    var reg1=/[A-Za-z]/.test(value);
		    var reg2=/[0-9]/.test(value);
		    var reg3=/[\(\)\~!@#\$\%\^\&\*_<>]/.test(value);
			if(reg0){
			  if(reg1&&reg2)flag=true;
			  if(reg2&&reg3)flag=true;
			  if(reg1&&reg3)flag=true;
			}
             return this.optional(element) || flag;
           }, "长度至少为8位,密码必须从字符（a-z，A-Z）、数字（0-9）、符号（~！@#$%^&*()_<>）中至少选择两种进行组合");
		jQuery.validator.addMethod("newPassWord", function(value, element) {
			if($('#newPassword').val()!='' && $('#newPassword').val() == $('#password').val()) {
				return false;
			}
			return true;
        }, "新密码不能与原密码相同");
		
		
			validator = $("#pwdForm").validate({
		rules: {
			    "password":{
			      required: true, 
			      remote: {
				      	url: '<s:url value="/user/checkpw"/>?tdqssid='+TDQS.SESSION_ID,
				      	type: 'post',
				  }
			     }, 
			     "newPassword":{
			      required: true,
			      stringCheck: true,
			      minlength:8,
			      maxlength:50,
			      newPassWord : true
			     },
			     "confirmPassword":{
			      required: true, 
			      maxlength:50 , 
			      equalTo:"#newPassword"
			     }
		},
		 messages:{
		    	"password":{
		    		required: "密码是必需的",
		    		remote: jQuery.format("请输入正确的密码"),
		    	},
		    	"newPassword":{
		    		required: "新密码是必需的",
					minlength: "密码长度至少为8位",
		    		stringCheck: "（a-z，A-Z）、（0-9）、（~！@#$%^&*()_<>）中至少选择两种进行组合",
		    		newPassWord: "新密码不能与原密码相同"
		    	},
		    	"confirmPassword":{
		    		required: "确认密码是必需的",
		    		equalTo: "确认密码必须和新密码相同"
		    	}
		},
		 showErrors: function(errorMap, errorList) {
				if(this.numberOfInvalids()>0){
					
					var currentWidth = $( ".changePassword" ).dialog( "option", "width" );
					if(currentWidth >= widthWithError){
						return;
					}
					$( ".changePassword" ).dialog( "option", "width", widthWithError );
				}
				
			    this.defaultShowErrors();
			  }
	});
	}
</script>
</head>
  
  <body>
   
	<div class="ui-layout-east">
		<div class="content">
				<div id="layout_feature">
				<div class="vertical_header">
				 设备拓扑
			</div>
	
				<div  split="true" id="tree_panel">
					<ul id="topoTree" class="ztree"></ul>
				</div>
				<div    id="detail_panel">
				</div>
			</div>
		</div>

	</div>
		<div class="ui-layout-west">
		
			<div class="vertical_header">
				系统菜单
			</div>

<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree_nav ztree"></ul>
</div>
			<div id="Sidebar" class="content">
				

			</div>
			<%--
			<div class="footer">
				Automatically positioned footer
			</div>
		   --%>
		</div>
		<div class="ui-layout-north">
			<div class="header">

                <div class="logo"></div>
                
                <div class="tool">
	                <ul class="systemmenu">
	                	
					   <li>
							<a class="icon password" id="password" title="修改密码" href="#"></a>
							<label></label>
					   </li>
	                   <li>
							<a class="icon logout" id="logout" href="<s:url value='/logout'/>" title="退出" href="#"></a>
							<label></label>
					   </li>
					   
					     
							
					</ul>
                </div>
				
			</div>
			<!-- 
<div class="content">
I only have toggler when 'closed' - I cannot be resized - and I do not 'slide open'
</div> -->
			<div id="toolbar" style="width: 100%;"></div>

		</div>

		<div class="ui-layout-south">
	
		<div class="mainview_footer">
				 <p>中国移动通信版权所有</p>
		</div>
	
	</div>
	
	<div id="mainContent">
	
		<div id="tab" style="width:400px;"></div>
		
	</div>

		<div class="changePassword" title="修改密码">
			<form id="pwdForm" class="hForm" name="pwdForm" method="post">
				<div class="rowElem">
				<label>旧密码：</label>
					<s:password name="password" id="password" cssClass="dialoginput"></s:password>
				</div>
				<div class="rowElem">
				<label>新密码：</label>
					<s:password name="newPassword" id="newPassword" cssClass="dialoginput"></s:password>
				</div>
				<div class="rowElem">
				<label>确认密码：</label>
					<s:password name="confirmPassword" id="confirmPassword" cssClass="dialoginput"></s:password>
				</div>
				
			</form>
		</div>
		<div class="about" title="关于">
				<div class="tittle">
					<label>FEMTO终端分发系统</label>
				</div>
				<br/>
	
				<div>
					<label>版本：</label><label>1.0</label>&nbsp;&nbsp;&nbsp;&nbsp;<label>发布日期：</label><label>2013.10.13</label>
				</div>
				
				<br/>
				<div>
					<label>中国移动通信版权所有</label>
				</div>
		</div>
		
		<div class="logoutDialog" title="退出">
			<form id="logoutForm"  method="post">
				<label>是否确认退出？</label>
				<a href="<s:url value='/logout'/>"> lll</a>
			</form>
					
		</div>


  </body>
</html>



<!--
#layout {
border: 1px solid #C2E2EB;
    float: left;
    height: auto;
    margin-top: 33px;
    width: 100%;
}
#tree_panel {
 float: left;
 height: 400px;
 width: 300px;
border-right: 1px solid #C2E2EB;
}
#detail_panel {
 height: 400px;
 margin-left: 300px;
 
}
-->
</style>



<SCRIPT type="text/javascript">
		<!--
		var setting2 = {
			check: {
				enable: true,
				//chkStyle: "radio",
			},
			async: {
				enable: true,
				url:"<s:url value='/topo/tree'/>",
				autoParam:["id"],
				dataFilter: filter
			},
			callback: {
				onClick: zTreeOnClick,
				onCheck: zTreeOnCheck
			},
			data: {
			key: {
				children: "nodes",
				name: "name",
			}
		}
			};

		function filter(treeId, parentNode, childNodes) {
			if (!childNodes) return null;
			for (var i=0, l=childNodes.length; i<l; i++) {
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}

		$(document).ready(function(){
			$.fn.zTree.init($("#topoTree"), setting2);
			
		});
		
		function zTreeOnClick(event, treeId, treeNode) {
   			 //alert(treeNode.id);
		};
		function zTreeOnCheck(event, treeId, treeNode) {
			var treeObj = $.fn.zTree.getZTreeObj("topoTree");
			var nodes = treeObj.getCheckedNodes(true);
			var ids="";
			$.each(nodes,function(i,node){
						 		if(node.checked){
						 			ids=ids+node.id
						 			if(i<nodes.length-1){
						 				ids=ids+","
						 			}
						 		}
						 	
						 	});
			
			$.ajax({
			  url: "<s:url value='/topo/topoSelet'/>?selectIds="+ids
			}).done(function() {
			  $(this).addClass("done");
			});
			
			$('#iframe_1001').attr('src',$("#iframe_1001").attr('src'));
		};
		
		//-->
	</SCRIPT>




